<template>
  <div>
    <table class="pars-table" style="width: 1000px">
      <thead>
        <tr>
          <th>风险所在位置</th>
          <th>风险代码</th>
          <th>风险名称</th>
          <th>风险点</th>
          <th v-if="!disabled" class="operation">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="row.id">
          <th>
            <el-input v-model="row.riskPosition" :disabled="disabled" placeholder="请输入风险所在位置" @change="handleChange" />
          </th>
          <th>
            <el-select
              v-model="row.riskCode"
              :disabled="disabled"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              @change="handleChange"
            >
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.title"
                :value="item.riskCode"
              />
            </el-select>
          </th>
          <th>
            <el-input v-model="row.riskName" :disabled="disabled" placeholder="请输入风险名称" @change="handleChange" />
          </th>
          <th>
            <el-input v-model="row.riskPoint" :disabled="disabled" placeholder="请输入风险点" @change="handleChange" />
          </th>
          <th v-if="!disabled">
            <i class="el-icon-remove icon remove" @click="handleRemove(index)" />
            <i class="el-icon-circle-plus icon add" @click="handleAdd(index)" />
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { parSettingMixin } from '@/utils/mixins'
import { searchRiskCode } from '@/api/task/task'

export default {
  name: 'SecRisk',
  mixins: [parSettingMixin],
  props: {
    disabled: Boolean,
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      data: this.value && this.value.bigRiskInfoList && this.value.bigRiskInfoList.length > 0
        ? this.value.bigRiskInfoList
        : [{ riskPosition: '', riskCode: '', riskName: '', riskPoint: '' }],
      keys: ['riskPosition', 'riskCode', 'riskName', 'riskPoint'],

      loading: false,
      list: []
    }
  },
  watch: {
    value(val) {
      this.data = val && val.bigRiskInfoList && val.bigRiskInfoList.length > 0 ? val.bigRiskInfoList : [this.getEmptyRow()]
    }
  },
  methods: {
    handleChange() {
      const data = {
        ...this.value,
        bigRiskInfoList: this.data
      }
      this.$emit('input', data)
      this.$emit('change', data)
    },
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        const params = {
          pageNum: 1, pageSize: 1000, keyWord: query
        }
        const { data } = await searchRiskCode(params)
        this.loading = false
        this.list = (data.records || []).map(item => ({
          ...item,
          title: `${item.riskCode}(${item.riskName})`
        }))
      } else {
        this.list = []
      }
    }
  }
}
</script>
